var liheight=[];
var htmlone="";
var issame = "";
var bool;
$.ajax({
    type: "get",
    url: "http://chst.vip:1234/api/getcategorytitle",
    async: false,
}).then(res => {
    res.result.forEach(item => {
        htmlone += `
        <li>
            <div class="box">
                <span>${item.title}</span>
                <div class="log">▼</div>
            </div>
            <ul class="titletwo"></ul>
        </li>
        `
    });
    console.log($("main>ul > .titleone"));
    $("main>ul.titleone").html(htmlone);


    Array.from($("main > ul.titleone > li")).forEach((item,index)=>{
        $.ajax({
            url:"http://chst.vip:1234/api/getcategory",
            type:"get",
             async:false,
            data:{
                titleid:index
            },
            success(suc){
                var htmltwo="";
                suc.result.forEach(item=>{
                    htmltwo+=`
                    <li categoryid=${item.categoryId}>${item.category}</li>
                    `
                })
                $($(item).children()[1]).html(htmltwo)
            }
        })
        Array.from($("main>ul>li")).forEach((item,index)=>{
            liheight[index]=$(item).height();
        })
    })
    startheight();

    $("main>ul>li>.box").click(function(){
        var index=$("main>ul>li").index($(this).parent());
        index=liheight[index]+"px"
        if(issame===this){
            if(bool){
                $(this).parent().animate({
                    height:index
                })
                bool=!bool;
            }else{
                $(this).parent().animate({
                    height:"1.002667rem"
                })
                bool=!bool;
            }
            issame=this;
        }else{
            $(this).parent().siblings().animate({
                height:"1.002667rem"
            }).end().animate({
                height:index
            })
            bool=false;
            issame=this;
        }
    })

    $("main>ul>li>.titletwo>li").click(function(){
        let categoryid=$(this).attr("categoryid");           //attr() 方法设置或返回被选元素的属性值。
        let title=$(this).html();
        location.href=`../pages放页面/category.html?title=${title}&categoryid=${categoryid}`
    })
})
function startheight(){
    $("main>ul>li").css({
        height:"1.002667rem"
    })
}
